import { View } from '@tarojs/components'
import { inject, observer } from 'mobx-react';
import Taro from '@tarojs/taro'
import Calendar from './components/Calendar'
import RecordList from './components/RecordList'
import AddButton from './components/AddButton'
import styles from './index.less';
import type { UserStore, RecordStore } from '@/store/types';

type Props = {
  userStore: UserStore;
  recordStore: RecordStore;
}

const Index = inject('userStore', 'recordStore')(observer((props: Props) => {
  const { userStore, recordStore } = props;

  return (
    <View className={styles.page}>
      <Calendar
        selectedDate={recordStore.selectedDate}
        onDateSelect={date => recordStore.setSelectedDate(date)}
      />
      <RecordList
        records={recordStore.todayRecords}
        onStatusChange={(id, status) => recordStore.updateRecordStatus(id, status)}
      />
      <AddButton onClick={() => Taro.navigateTo({ url: '/pages/add-record/index' })} />
    </View>
  )
}));

export default Index